﻿<template>
   <elm-page-tb> <!-- v-if="mp==elm.nst"-->
        <template #top>
            <el-input placeholder="请查询输入内容" prefix-icon='el-icon-search' size="mini" style="width: 250px;" v-model="postData.name" clearable></el-input>
            <right>
                <el-button-group>
                    <el-button icon="el-icon-search" size="mini" @click="treebinding()">查询</el-button>
                    <elm-open-button url="menu_edit" icon="el-icon-edit" title="新增模块" width="700" height="450" :data="{pid: '0', pname: '无' }">新增</elm-open-button>
                </el-button-group>
            </right>
        </template>
        <elm-table-tree url="/system/menu/GetTree" :post-data="postData" :default-expand-all="true" :page-size="50" height="100%">
            <el-table-column type="index" label="序号" width="60px" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" :sortable='true'>
                <template v-slot="scope">
                    <li v-if="scope.row.icon!='' &&  scope.row.icon!=null" :class="scope.row.icon"></li>
                    {{scope.row.name}}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="说明"></el-table-column>
            <el-table-column prop="navigateurl" label="路径"></el-table-column>
            <el-table-column prop="sort" label="顺序" width="80px" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="180px" align="center">
                <template v-slot="scope">
                    <elm-open-button url="menu_edit" :title="'编辑[' + scope.row.name + ']模块'" width="700" height="450" :data="{ model: scope.row }" type="text">编辑</elm-open-button>
                    <elm-open-button url="menu_edit" :title="'新增[' + scope.row.name + ']的下级模块'"  width="700" height="450"
                                     :data="{  pid: scope.row.id }" type="text">新增下级</elm-open-button>
                    <el-button type="text" size="mini" @click="deleteData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </elm-table-tree>
    </elm-page-tb>
  <div class="pfull" style="padding: 50px;background-color: #fff;border-radius: 4px;text-align: center;" v-else>
    <el-input v-model="mp" style="margin: auto;width: 300px;">
      <template slot="prepend">工程师口令</template>
    </el-input>
  </div>
</template>

<script>
    export default {
        extends: elmVueBase,
        data() {
            return {
                postData: { name: null },
              mp:null,
            }
        },
      async created() {
        },
        methods: {
            async deleteData(data) {
                await this.delete('/system/menu/Delete', { id: data.id });
                this.treebinding();
              var res = await this.post('/system/login/GetUserMenu');
              elm.main.vue.menuData=elm.info.menu = res;
            }
        }
    }
</script>

<style scoped>
</style>